//渠道管理 - 渠道数据 - 渠道转化数据

import React, { Component } from 'react';
import { Form , Row, Col, Radio, DatePicker, Select, Icon } from 'antd';
import TitleBtn from '../../../components/TitleBtn';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

class Statistical extends Component {

	handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
	}
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
		const { getFieldDecorator } = this.props.form;
		const rangeConfig = {
			rules: [{ type: 'array', required: true, message: 'Please select time!' }],
		};
		return (
      <div className="apply">
        <div>
          <Icon type="appstore" />
          <span className="apply-font">渠道统计</span>
          <TitleBtn />
        </div>
        <div className="line"></div>
        <div className="per-info">
          <Form layout="inline" onSubmit={this.handleSubmit}>
            <Row>
              <Col span={6}>
                <FormItem>
                  {getFieldDecorator('statisticCanal', {
                    rules: [{ required: true, message: 'Please input your statisticCanal!' }],
                  })(
                    <Select placeholder="选择渠道" style={{ color: 'rgba(0,0,0,.25)', width: '400px' }}>
                    <Select.Option value="canal01">渠道01</Select.Option>
                    <Select.Option value="canal02">渠道02</Select.Option>
                    <Select.Option value="canal03">渠道03</Select.Option>
                  </Select>
                  )} 
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem>
                  {getFieldDecorator('range-picker', rangeConfig)(
                    <RangePicker format="YYYY/MM/DD" style={{ color: 'rgba(0,0,0,.25)', width: '400px' }} />
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
        <div className="date-change">
          <Radio.Group defaultValue="week">
            <Radio.Button value="week">7天</Radio.Button>
            <Radio.Button value="month">30天</Radio.Button>
            <Radio.Button value="quarter">90天</Radio.Button>
          </Radio.Group>
        </div>
      </div>   
		);
	}
}

const StatisticalForm = Form.create()(Statistical);

export default StatisticalForm;